<template>
  <el-dialog
    :title="isEdit ? '修改' : '新增'"
    :visible.sync="dialogVisible"
    width="50%"
  >
    <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="分站编号" prop="SubNo">
            <el-select v-model="ruleForm.SubNo">
              <el-option
                v-for="item in SubNoList"
                :key="item.SubStationNum"
                :label="item.SubStationNum"
                :value="item.SubStationNum"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="检测状态" prop="sensorState">
            <el-select v-model="ruleForm.sensorState">
              <el-option
                v-for="item in jcztlist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="检测采区" prop="miningArea">
            <el-input v-model="ruleForm.miningArea"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="安装日期" prop="installTime">
            <div class="block">
              <el-date-picker
                v-model="ruleForm.installTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="斜井类型" prop="miningFace" >
            <el-select
              v-model="ruleForm.miningFace"
            @change="ShunCao"
            >
              <el-option
                v-for="item in GongZuoMianList"
                :key="item.ID"
                :label="item.gzmname"
                :value="item.gzmname"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="安装巷道" prop="miningTunnel">
            <el-select
              v-model="ruleForm.miningTunnel"
            >
              <el-option
                v-for="item in ShangXiaShunCao"
                :key="item.id"
                :label="item.XS"
                :value="item.XS"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="安装深度" prop="holeDeep">
            <el-input v-model="ruleForm.holeDeep"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="端面分组" prop="miningGroup">
            <el-input v-model="ruleForm.miningGroup"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="距井口" prop="faceDistance">
            <el-input v-model="ruleForm.faceDistance"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="传感器类型" prop="sensorStyle">
            <el-select
              v-model="ruleForm.sensorStyle"
              @change="change"
              :disabled="isEdit ? true : false"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="安装基点" prop="basicPoint">
            <el-select v-model="ruleForm.basicPoint" placeholder="请选择">
              <el-option
                v-for="item in anzhuangjidian"
                :key="item.ID"
                :label="item.AZJD"
                :value="item.AZJD"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="测点通道" prop="sensorChannel">
            <el-input v-model="ruleForm.sensorChannel"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="传感器编号" prop="factoryNum">
            <div class="muhuchaxun1" style="display: flex;">
              <el-autocomplete
                v-model="ruleForm.factoryNum"
                value-key="factoryNum"
                :fetch-suggestions="querySearchAsync"
                :disabled="isEdit ? true : false"
                placeholder="请输入编号"
                :popper-append-to-body="false"

                
              />
              <div>
                <el-button
                  type="primary"
                  :disabled="isEdit ? true : false"
                  style="padding: 4px 10px; margin-left: 5px"
                  @click="MuHuChaXun"
                  >搜索</el-button
                >
              </div>
            </div>
            <!-- <el-input v-model="ruleForm.factoryNum"></el-input> -->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="计算单位" prop="unit">
            <el-select v-model="ruleForm.unit">
              <el-option
                v-for="item in jsdwlist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="预警阀值" prop="alarm_01">
            <el-input v-model="ruleForm.alarm_01"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="报警阀值" prop="alarm_02">
            <el-input v-model="ruleForm.alarm_02"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="实测数值" prop="calibrationValue">
            <div style="display: flex">
              <el-input
                v-model="ruleForm.calibrationValue"
                :disabled="true"
              ></el-input>
              <div>
                <el-button
                  type="primary"
                  @click="SiceshuZhi"
                  :disabled="isEdit ? false : true"
                  style="
                    background-color: white;
                    color: blue;
                    font-size: 20px;
                    border: none;
                  "
                  icon="el-icon-search"
                ></el-button>
              </div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="校准数值" prop="calculationData">
            <el-input v-model="ruleForm.calculationData"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计算截距" prop="calibrationIntercept">
            <div style="display: flex">
              <el-input
                v-model="ruleForm.calibrationIntercept"
                :disabled="true"
              ></el-input>

              <div>
                <el-button
                  type="primary"
                  @click="JisuanjieJu"
                  :disabled="isEdit ? false : true"
                  style="
                    background-color: white;
                    color: blue;
                    font-size: 20px;
                    border: none;
                  "
                  icon="el-icon-search"
                ></el-button>
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="测点分站" prop="substationNum">
            <el-select v-model="ruleForm.substationNum" placeholder="请选择">
              <el-option
                v-for="item in optionsip"
                :key="item.ID"
                :label="item.SubStationIP"
                :value="item.SubStationIP"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="温度补偿" prop="tempSensorSysNum">
            <el-input v-model="ruleForm.tempSensorSysNum"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="一次系数" prop="coefficient_01">
            <el-input v-model="ruleForm.coefficient_01"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="二次系数" prop="coefficient_02">
            <el-input v-model="ruleForm.coefficient_02"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="温补系数" prop="tempCoefficient">
            <el-input v-model="ruleForm.tempCoefficient"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="截距" prop="intercept">
            <el-input v-model="ruleForm.intercept"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="波长1" prop="factoryWavelength_01">
            <el-input v-model="ruleForm.factoryWavelength_01"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="波长1上限" prop="factoryWavelength_01Up">
            <el-input v-model="ruleForm.factoryWavelength_01Up"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="波长1下限" prop="factoryWavelength_01Down">
            <el-input v-model="ruleForm.factoryWavelength_01Down"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="波长2" prop="factoryWavelength_02">
            <el-input v-model="ruleForm.factoryWavelength_02"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="波长2上限" prop="factoryWavelength_02Up">
            <el-input v-model="ruleForm.factoryWavelength_02Up"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="波长2下限" prop="factoryWavelength_02Down">
            <el-input v-model="ruleForm.factoryWavelength_02Down"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="波长3" prop="factoryWavelength_03">
            <el-input v-model="ruleForm.factoryWavelength_03"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="波长3上限" prop="factoryWavelength_03Up">
            <el-input v-model="ruleForm.factoryWavelength_03Up"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="波长3下限" prop="factoryWavelength_03Down">
            <el-input v-model="ruleForm.factoryWavelength_03Down"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="波长4" prop="factoryWavelength_04">
            <el-input v-model="ruleForm.factoryWavelength_04"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="波长4上限" prop="factoryWavelength_04Up">
            <el-input v-model="ruleForm.factoryWavelength_04Up"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="波长4下限" prop="factoryWavelength_04Down">
            <el-input v-model="ruleForm.factoryWavelength_04Down"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="save"
        >确定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import {
  dingbanshebeipeizhi,
  dingbancedianxinxiadd,
  dingbancedianxinxixiugai,
  dingbanaddcedianfenzhananzhuangjidian,
  dingbanaddcedianfenzhanip,
  dingbancedianxinxitanchuleixing,
  dingbancedianxinxitanchumohuchaxun,
  dingbancedianxinxitanchushice,
  dingbancedianxinxitanchujisuanjieju,
  dingbanpeizhigongzuomianlist,
  dingbanaddcedianshangxiashuncao
} from "../../../https/api/user";
const ruleForm = {
  SubNo: "",
  sensorState: "", // 检测状态
  miningArea: "", // 检测采区
  installTime: "", // 安装日期
  miningFace: "", // 工作面
  miningTunnel: "", // 安装巷道
  holeDeep: "", // 安装深度
  miningGroup: "", // 端面分组
  faceDistance: "", // 距工作面
  sensorStyle: "", // 传感器类型
  basicPoint: "", // 安装基点
  sensorChannel: "", // 测点通道
  factoryNum: "", // 传感器编号
  unit: "", // 计算单位
  alarm_01: "", // 预警阀值
  alarm_02: "", // 报警阀值
  calibrationValue: "0", // 实时数值
  calculationData: "", // 校准数值
  calibrationIntercept: "0", // 计算载距
  substationNum: "", // 测点分站
  tempSensorSysNum: "", // 温度补偿
  coefficient_01: "", // 一次系数
  coefficient_02: "", // 二次系数
  tempCoefficient: "", // 温补系数
  intercept: "", // 截距
  factoryWavelength_01: "", // 波长1
  factoryWavelength_01Up: "", // 波长1上限
  factoryWavelength_01Down: "", // 波长1下限
  factoryWavelength_02: "", // 波长2
  factoryWavelength_02Up: "", // 波长2上限
  factoryWavelength_02Down: "", // 波长2下限
  factoryWavelength_03: "", // 波长3
  factoryWavelength_03Up: "", // 波长3上限
  factoryWavelength_03Down: "", // 波长3下限
  factoryWavelength_04: "", // 波长4
  factoryWavelength_04Up: "", // 波长4上限
  factoryWavelength_04Down: "", // 波长4下限
};
export default {
  data() {
    return {
      leixinglist: [],
      dialogVisible: false,
      ruleForm,
      isEdit: false,
      loading: false,
      options: [
        { label: "顶板离层", value: "顶板离层" },
        { label: "锚杆应力", value: "锚杆应力" },
        { label: "钻孔应力", value: "钻孔应力" },
        { label: "光栅温度", value: "光栅温度" },
        { label: "锚索应力", value: "锚索应力" },
        { label: "恒阻锚索", value: "恒阻锚索" },
        { label: "顶底板位移", value: "顶底板位移" },
        { label: "单体位移", value: "单体位移" },
        { label: "单元支架", value: "单元支架" },
        { label: "多点位移", value: "多点位移" },
        { label: "可视化锚杆", value: "可视化锚杆" },
        { label: "应变传感器", value: "应变传感器" },
        { label: "可视化锚索", value: "可视化锚索" },
      ],
      jcztlist: [
        {
          value: "启用",
          lable: "启用",
        },
        {
          value: "停用",
          lable: "停用",
        },
      ],

      jsdwlist: [
        {
          value: "mm",
          label: "mm",
        },
        {
          value: "cm",
          label: "cm",
        },
        {
          value: "m",
          label: "m",
        },
        {
          value: "kN",
          label: "kN",
        },
        {
          value: "MPa",
          label: "MPa",
        },
        {
          value: "℃",
          label: "℃",
        },
        {
          value: "με",
          label: "με",
        },
      ],
      optionsip: [],
      anzhuangjidian: [],
      SubNoList: [],
      GongZuoMianList:[],
      ShangXiaShunCao:[],
    };
  },
  methods: {
    FenZhanAxios() {
      dingbanshebeipeizhi().then((res) => {
        console.log("分站信息", res);
        if (res) {
          this.SubNoList = res;
        }
      });
    },

    show(data) {
      this.isEdit = !!data;
      this.ruleForm = data || ruleForm;
      this.dialogVisible = true;
    },
    async save() {
      const api = this.isEdit
        ? dingbancedianxinxixiugai
        : dingbancedianxinxiadd;
      try {
        this.loading = true;
        const result = await api(this.ruleForm);
        // const message = this.isEdit ? "修改成功！" : "添加成功！";
        console.log("》》》《《《", result);
        this.$message({
          showClose: true,
          message: result,
          type: 'success'
        });

        this.$parent.OnList();
        this.dialogVisible = false;
        this.$refs.ruleForm.resetFields();
        // console.log('>>>>', result);
      } catch (e) {
        // console.log(e)
      } finally {
        this.loading = false;
      }
    },
    // 传感器类型
    change() {
      const data = {
        names: ruleForm.sensorStyle,
        number: 0,
      };
      console.log(ruleForm.sensorStyle);
      dingbancedianxinxitanchuleixing(data).then((res) => {
        console.log("<><><><", res);
        this.leixinglist = res;
      });

      // 安装基点

      const data1 = {
        t: 0,
        names: this.ruleForm.sensorStyle,
      };
      dingbanaddcedianfenzhananzhuangjidian(data1).then((res) => {
        console.log("安装基点", res);
        this.anzhuangjidian = res;
      });
    },
    // 模糊查询
    querySearchAsync(queryString, cb) {
      console.log(">>>>>>>>>", this.tableData);
      queryString = queryString.toLowerCase();

      function filter(item) {
        /* 先全部转小写，这样才能匹配模糊查询，不区分大小写
                    然后用includes去查询是否包含你输入的关键字
                */
        //    console.log(item);
        const factoryNum = item.factoryNum.toLowerCase();
        return factoryNum.includes(queryString);
      }
      var restaurants = this.leixinglist;
      var results = queryString ? restaurants.filter(filter) : restaurants;
      cb(results);
    },
    // 通过传感器编号 得到传感器编号 模糊查询 返回数据
    MuHuChaXun() {
      const data = {
        names: ruleForm.factoryNum,
        q: 0,
      };
      dingbancedianxinxitanchumohuchaxun(data).then((res) => {
        console.log("测点弹出框模糊查询查询数据", res);
        this.ruleForm.intercept = res[0].intercept;
        this.ruleForm.coefficient_01 = res[0].coefficient_01;
        this.ruleForm.coefficient_02 = res[0].coefficient_02;
        this.ruleForm.tempCoefficient = res[0].tempCoefficient;
        this.ruleForm.tempSensorSysNum = res[0].tempIntercept;
        if (res[0].factoryWavelength_01 == 0) {
          this.ruleForm.factoryWavelength_01 = res[0].factoryWavelength_01;
          this.ruleForm.factoryWavelength_01Up = 0;
          this.ruleForm.factoryWavelength_01Down = 0;
        } else {
          this.ruleForm.factoryWavelength_01 = res[0].factoryWavelength_01;
          this.ruleForm.factoryWavelength_01Up =
            res[0].factoryWavelength_01 + 1;
          this.ruleForm.factoryWavelength_01Down =
            res[0].factoryWavelength_01 - 1;
        }

        if (res[0].factoryWavelength_02 == 0) {
          this.ruleForm.factoryWavelength_02 = res[0].factoryWavelength_02;
          this.ruleForm.factoryWavelength_02Up = 0;
          this.ruleForm.factoryWavelength_02Down = 0;
        } else {
          this.ruleForm.factoryWavelength_02 = res[0].factoryWavelength_02;
          this.ruleForm.factoryWavelength_02Up =
            res[0].factoryWavelength_02 + 1;
          this.ruleForm.factoryWavelength_02Down =
            res[0].factoryWavelength_02 - 1;
        }

        if (res[0].factoryWavelength_03 == 0) {
          this.ruleForm.factoryWavelength_03 = res[0].factoryWavelength_03;
          this.ruleForm.factoryWavelength_03Up = 0;
          this.ruleForm.factoryWavelength_03Down = 0;
        } else {
          this.ruleForm.factoryWavelength_03 = res[0].factoryWavelength_03;
          this.ruleForm.factoryWavelength_03Up =
            res[0].factoryWavelength_03 + 1;
          this.ruleForm.factoryWavelength_03Down =
            res[0].factoryWavelength_03 - 1;
        }

        if (res[0].factoryWavelength_04 == 0) {
          this.ruleForm.factoryWavelength_04 = res[0].factoryWavelength_04;
          this.ruleForm.factoryWavelength_04Up = 0;
          this.ruleForm.factoryWavelength_04Down = 0;
        } else {
          this.ruleForm.factoryWavelength_04 = res[0].factoryWavelength_04;
          this.ruleForm.factoryWavelength_04Up =
            res[0].factoryWavelength_04 + 1;
          this.ruleForm.factoryWavelength_04Down =
            res[0].factoryWavelength_04 - 1;
        }
      });
    },

    // 实测数值
    SiceshuZhi() {
      const data = {
        names: this.ruleForm.factoryNum,
        w: 0,
      };
      dingbancedianxinxitanchushice(data).then((res) => {
        console.log("11111111111111111", res);
        if (res) {
          res.forEach((item) => {
            console.log("测点弹出框实测数值", item.SRTDT_MonitorValue);
            this.ruleForm.calibrationValue = item.SRTDT_MonitorValue + ""; //实测数值
            // this.ruleForm.intercept = item.SRTDT_MonitorValue + ""; // 截距
            // this.ruleForm.calibrationIntercept = item.SRTDT_MonitorValue + ""; // 计算截距  
          });
        } else {
          alert("暂时没有数据");
        }
      });
    },
    // 计算截距
    JisuanjieJu() {
      const data = {
        calibrationValue: this.ruleForm.calibrationValue,
        calculationData: this.ruleForm.calculationData,
        intercept: this.ruleForm.intercept,
        names: this.ruleForm.factoryNum,
      };
      dingbancedianxinxitanchujisuanjieju(data).then((res) => {
        console.log("计算截距", res);
        this.ruleForm.calibrationIntercept = res;
      });
    },
    // 分站ip
    fenzhanlist() {
      const data = {
        r: 0,
      };
      dingbanaddcedianfenzhanip(data).then((res) => {
        console.log("分站ip", res);
        this.optionsip = res;
      });
    },
    //工作面
    GongZuoMianLieBiao(){
      dingbanpeizhigongzuomianlist().then(res=>{
        console.log('工作吗',res);
        this.GongZuoMianList = res
      })
    },
    ShunCao(){
      const data ={
        gzmname :this.ruleForm.miningFace
      }
      dingbanaddcedianshangxiashuncao(data).then(res=>{
        console.log('顺槽名称',res);
        this.ShangXiaShunCao = res
      })
    }
  },
  mounted() {
    this.fenzhanlist();
    this.FenZhanAxios();
    this.GongZuoMianLieBiao();
    // this.anzhuangjidianlist()
  },
};
</script >

<style scoper lang="less" >
.el-select {
  width: 100%;
}
.el-dialog__wrapper {
  background-color: rgb(14, 26, 55);
}
// .el-input {
//   width: 230px;
// }

/deep/::v-deep .el-input__inner {
  height: 22px !important;
}

// /deep/::v-deep .el-input--suffix .el-input__inner {
//   width: 100% !important;
// }

/deep/::v-deep .el-input__icon {
  line-height: 22px !important;
}

.el-autocomplete-suggestion__wrap{
  width: 400px;
}
</style>